<template>
  <div id="topItemLayout">
    <Row>
      <Col span="3">
        <img :src="topItem.url" width="50" height="50"/>
      </Col>
      <Col span="8">
        <h3>{{topItem.hotelName}}</h3>
      </Col>
      <Col span="6">
        <div style="padding: 15px 0;">
          <span>预选率：</span>
          <Progress :percent="topItem.checkInRate" status="active"></Progress>
        </div>
      </Col>
      <Col span="6">
        <div>
          <span>好评：</span>
          <Rate disabled allow-half v-model="topItem.star"></Rate>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
  export default {
    name: 'top-item',
    props: ['topItem']
  }
</script>
<style>
  #topItemLayout {
    background:#fff;
    border-bottom: 1px solid #ccc;
    height: 70px;
    padding: 5px 20px
  }

  #topItemLayout .ivu-col h3 {
    line-height: 50px;
    color: #495060;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
